<template>
  <div class="info">
    <mt-header>
      <router-link to="/info/infoFlock" slot="more">
        <mt-button>群聊</mt-button>
      </router-link>
    </mt-header>
    <div class="infoContent">
      <mt-cell
        href="/info/infoFlock/flockDetails/1"
        :title="item.title"
        :label="item.info"
        v-for="(item, index) in infoList"
        :key="index"
      >
        <img slot="icon" :src="item.image" width="50" height="50" />
        <span style="height: 50px">{{ item.time | time }}</span>
      </mt-cell>
    </div>
  </div>
</template>

<script>
import MtHeader from "@/components/MtHeader";
import { timeAgo } from "@/assets/js/timeAgo.js";
export default {
  name: "Info",
  components: {
    MtHeader,
  },
  filters: {
    time(value){
      return timeAgo(value);
    }
  },
  methods: {
  },
  data() {
    return {
      infoList: [
        {
          title: "系统消息",
          info: "来自重庆的帅哥给你发了一个好感来自重庆的帅哥给你发了一个好感",
          time: "1602320586",
          image: require("@/assets/images/info/xiTong.svg"),
        },
        {
          title: "论坛消息",
          info: "来自重庆的帅哥给你发了一个好感",
          time: "1625130186",
          image: require("@/assets/images/info/lunTan.svg"),
        },
        {
          title: "我的留言",
          info: "来自重庆的帅哥给你发了一个好感",
          time: "1625389386",
          image: require("@/assets/images/info/xingQu.svg"),
        },
        {
          title: "小芳",
          info: "来自重庆的帅哥给你发了一个好感",
          time: "1625388295",
          image: require("@/assets/images/info/liuYan.svg"),
        },{
          title: "小芳",
          info: "美女，你好！",
          time: "1625388295",
          image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F20181%2F19%2F2018119163229_WW8we.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627957281&t=5faf1fbb71025ceaa6ba454402bf4c9a",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.info {
  height: calc(100% - 55px);
}

.info .infoContent {
  height: calc(100% - 40px);
  //padding: 10px;
  box-sizing: border-box;
  border-top: 1px solid Gainsboro;
}

.info .mint-cell img {
  float: left;
  margin-right: 10px;
}

.info .mint-cell-title {
  overflow: hidden;
}

.info .mint-cell-label {
  margin-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info .mint-cell-wrapper {
  //padding: 0;
  background: none;
}

.info .mint-cell {
  border-bottom: 1px solid Gainsboro;
  padding: 10px 0;
  box-sizing: border-box;
}
</style>